/**
 * Created by IntelliJ IDEA.
 * User: Liu Yuhong
 * Date: 12-10-16
 * Time: 下午5:44
 * Generate homepage slideshow plugin
 */

(function($) {

    $.fn.extend({
        'version': "1.0",
        UISlideShow: function(options, value) {
            var self = this;
            if(self.prop("tagName") == undefined) return false;

            var uiOptions = $.extend({
                'itemId': null,
                'items': null,
                'hideThumb': true
            }, options);

            if(typeof value == 'string') value = "'" + value + "'";
            if(typeof options != 'object') eval("uiOptions." + options + " = " + value);

            var efArray = [], effects = 6, seed,
                showTimeout, hideTimeout,
                autoTimeout, auto = true, nextTrigger,
                idx = 1, delay = 1000, interval = 1000,
                prevItem, disableThumb = false, currentZIndex = currentZIndex = uiOptions.items.length;

            while(efArray.length < effects) {
                seed = Math.floor((Math.random() * effects) + 1);
                if($.inArray(seed, efArray) < 0)
                    efArray.push(seed);
            }
            $( self ).each(function() {
                var slideShow = $( '<div></div>' ).addClass("ui-slideshow")
                    .bind('mouseenter', function() { window.clearTimeout(autoTimeout); auto = false; })
                    .bind('mouseleave', function() { auto = true; autoSlide(3000); });
                $( this ).empty().html(slideShow);

                var slideWrapper = $( '<div></div>' ).addClass("ui-slidewrapper")
                    .appendTo(slideShow)
                    .css({ 'width': uiOptions.items.length * $( this ).width() });

                var thumbar = $( '<div></div>' ).addClass("ui-thumbar")
                    .appendTo($( '<div></div>' ).addClass("float_left w_100ps").appendTo(slideShow))
                    .append($( '<div></div>' ).addClass("float_right"))
                    .after($( '<div></div>' ).addClass("clear"))
                    .css({ 'zIndex': uiOptions.items.length + 2 });
                if(uiOptions.hideThumb) {
                    setTimeout(function() {
                        thumbar.animate({ 'marginTop': 0 })
                    }, 1000);
                    slideShow.bind('mouseenter', function() {
                        window.clearTimeout(hideTimeout);
                        showTimeout = setTimeout(function() {
                            $( thumbar ).animate({ 'marginTop': -$(thumbar).height() });
                        }, 500);
                    }).bind('mouseleave', function() {
                        window.clearTimeout(showTimeout);
                        hideTimeout = setTimeout(function() {
                            $( thumbar ).animate({ 'marginTop': 0 });
                        }, 500);
                    });
                } else {
                    thumbar.css({ 'marginTop': -$(thumbar).height() });
                }

                $( uiOptions.items ).each(function(itemIndex) {
                    var bindImg = $( '<a></a>' ).appendTo(slideWrapper)
                        .attr({ 'id': "slide" + itemIndex, 'title': this.title }).bind('click', this.callback)
                        .css({ 'zIndex': itemIndex == 0 ? currentZIndex  : "", 'backgroundImage': "url(" + this.imgUrl + ")" });

                    if(itemIndex == 0) prevItem = bindImg;

                    $( '<a href=""></a>' ).appendTo(thumbar.find(".float_right"))
                        .attr({ 'id': "thumb" + itemIndex, 'target': "slide" + itemIndex })
                        .css({ 'backgroundImage': "url(" + this.thumbUrl + ")" })
                        .addClass(itemIndex == 0 ? "current" : "")
                        .bind('click', { 'target': bindImg }, thumbTrigger);
                    
                   
                    
                    
                });

                function thumbTrigger(event, reset) {
                    if($( this ).is(".current") && !reset) return false;
                    $( this ).parent().find(".current").removeClass("current");
                    $( this ).addClass("current");
                    if(!disableThumb) {
                        disableThumb = true;
                        slide(event.data.target, this);
                    }
                    return false;
                }

                function autoSlide(timer) {
                    nextTrigger = $( "a.current" ).next("a").length > 0 ?
                        $( "a.current" ).next("a") : $( "a.current" ).parent().find("a:first");
                    autoTimeout = setTimeout(function() { nextTrigger.trigger("click"); }, timer);
                }
                autoSlide(3000);

                function slide(item, toggle) {
                    $( item ).css({ 'zIndex': currentZIndex - 1 });
                    switch(efArray[idx]) {
                        case 1:
                            efBlindVertical(item, "horizen", toggle);
                            break;
                        case 2:
                            efBlindHorizon(item, "vertical", toggle);
                            break;
                        case 3:
                            efBlindHorizon(item, "horizen", toggle);
                            break;
                        case 4:
                            efBlindVertical(item, "vertical", toggle);
                            break;
                        case 5:
                            efMosaic(item, toggle);
                            break;
                        case 6:
                            efFade(item, toggle);
                            break;
                    }
                    idx >= efArray.length - 1 ? idx = 0 : idx++;
                }

                function efMosaic(item, toggle) {
                    var clipWidth = $( prevItem ).width() / 10,
                        clipHeight = $( prevItem ).height() / 5,
                        bg = $( prevItem ).css("backgroundImage");

                    for(var loop = 0; loop < 5; loop++) {
                        for(var innerLoop = 0; innerLoop < 10; innerLoop++) {
                        $( '<span></span>' ).appendTo($( prevItem ))
                            .css({
                                'left': clipWidth * innerLoop,
                                'top': clipHeight * loop,
                                'width': clipWidth,
                                'height': clipHeight,
                                'backgroundImage': bg,
                                'backgroundPosition': -clipWidth * innerLoop + "px " + -clipHeight * loop + "px"
                            });
                        }
                    }
                    $( prevItem ).css({ 'backgroundImage': "" });
                    setTimeout(function() {
                        for(var clip = 0; clip < 50; clip++) {
                            $($( prevItem ).find("span").get(clip - 1)).hide(clip * 80);
                        }
                        setTimeout(function() {
                            reset(item, bg, toggle);
                        }, interval);
                    }, delay);
                }

                function efFade(item, toggle) {
                    $( prevItem ).fadeOut(interval, function() {
                        reset(item, null, toggle);
                    });
                }

                function efBlindVertical(item, direction, toggle) {
                    var clipWidth = $( prevItem ).width() / 10,
                        clipHeight = $( prevItem ).height(),
                        bg = $( prevItem ).css("backgroundImage");

                    for(var loop = 0; loop < 10; loop++) {
                        $( '<span></span>' ).appendTo($( prevItem ))
                            .css({
                                'left': $( prevItem ).position().left + clipWidth * loop,
                                'width': clipWidth,
                                'height': clipHeight,
                                'backgroundImage': bg,
                                'backgroundPosition': -clipWidth * loop + "px 0"
                            });
                    }
                    $( prevItem ).css({ 'backgroundImage': "" });
                    setTimeout(function() {
                        if(direction == "vertical") {
                            $( prevItem ).find("span:even").animate({ 'marginTop': -clipHeight }, 1000);
                            $( prevItem ).find("span:odd").animate({ 'marginTop': clipHeight }, 1000);
                        } else if(direction == "horizen") {
                            $( prevItem ).find("span").animate({ 'width': 0 }, 1000);
                        }
                        setTimeout(function() {
                            reset(item, bg, toggle);
                        }, interval);
                    }, delay);
                }

                function efBlindHorizon(item, direction, toggle) {
                    var clipWidth = $( prevItem ).width(),
                        clipHeight = $( prevItem ).height() / 10,
                        bg = $( prevItem ).css("backgroundImage");

                    for(var loop = 0; loop < 10; loop++) {
                        $( '<span></span>' ).appendTo($( prevItem ))
                            .css({
                                'top': $( prevItem ).position().top + clipHeight * loop,
                                'width': clipWidth,
                                'height': clipHeight,
                                'backgroundImage': bg,
                                'backgroundPosition': "0 " + -clipHeight * loop + "px"
                            });
                    }
                    $( prevItem ).css({ 'backgroundImage': "" });
                    setTimeout(function() {
                        if(direction == "vertical") {
                            $( prevItem ).find("span").animate({ 'height': 0 }, 1000);
                        } else if(direction == "horizen") {
                            $( prevItem ).find("span:even").animate({ 'marginLeft': -clipWidth }, 1000);
                            $( prevItem ).find("span:odd").animate({ 'marginLeft': clipWidth }, 1000);
                        }
                        setTimeout(function() {
                            reset(item, bg, toggle);
                        }, interval);
                    }, delay)
                }

                function reset(item, bg, toggle) {
                    if(bg == null)
                        prevItem.css({ 'display': "", 'zIndex': "" });
                    else
                        prevItem.css({ 'zIndex': "", 'backgroundImage': bg }).find("span").remove();
                    prevItem = $( item ).css({ 'zIndex': currentZIndex });
                    disableThumb = false;
                    if(auto)
                        autoSlide(3000);
                    else {
                        if($( toggle ).attr("id") != $( "a.current" ).attr("id"))
                            $( "a.current" ).trigger('click', [true]);
                    }
                }
            });
        }
    });
})(jQuery);
